<template>
  <el-form  :model="state.queryForm" class="query-form">
      <el-row>
        <el-col :xl="{span:10}"  :xs="{span:24}">
          <el-form-item label="字典名称">
            <el-input style="width: 70%" v-model="state.queryForm.name" placeholder="字典名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="{span:10}"  :xs="{span:24}">
          <el-form-item label="字典编号">
            <el-input style="width: 70%" v-model="state.queryForm.code" placeholder="字典编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="{span:4}"  :xs="{span:24}">
          <el-button @click="getDictDataList" class="title-button" type="primary">查询</el-button>
        </el-col>
      </el-row>
   </el-form>
  <el-button class="title-button query-form" @click="add" type="primary">新增</el-button>
  <el-table
      :data="state.dictList"
      border
      v-loading="pageLoading"
      :height="tableHeight-290"
      style="width: 100%">
    <el-table-column
        prop="date"
        label="序号"
        type="index"
        header-align="center"
        align="center"
        width="70">
    </el-table-column>
    <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="字典名称"
    >
    </el-table-column>
    <el-table-column
        prop="code"
        header-align="center"
        align="center"
        label="字典编号"
    >
    </el-table-column>
    <el-table-column
        label="操作"
        width="130">
      <template #default="scope">
        <inline-button @click="view(scope.row)"   icon="el-icon-view" name="查看"></inline-button>
        <inline-button @click="edit(scope.row)"   icon="el-icon-edit" name="编辑"></inline-button>
        <inline-button @click="addSon(scope.row)"   icon="el-icon-plus" name="新增子项"></inline-button>
        <inline-button @click="del(scope.row)" is-del  icon="el-icon-delete" name="删除"></inline-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="state.queryForm.current"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="state.queryForm.size"
      layout="total, sizes, prev, pager, next"
      :total="state.queryForm.total">
  </el-pagination>
  <dict-code-add-update @reload="getDictDataList" ref="dictCodeAddUpdateRef"></dict-code-add-update>
</template>

<script>
import adapter from "@/sys/js/adapter";
import * as page from "@/sys/js/page"
import {reactive,onMounted,ref} from 'vue'
import VueUtil from "@/util/VueUtil";
import {NuoDictController} from "@/actions/controller";
import dictCodeAddUpdate from './dict-code-add-update'
import InlineButton from "@/components/button/inline-button";

export default {
  name: "dict-code-table",
  mixins: [adapter],
  components:{
    dictCodeAddUpdate,
    InlineButton
  },
  setup(){
     let state = reactive({
       queryForm:{
         current:1,
         size: 10,
         total: 0,
         name: '',
         code: ''
       },
       dictList: []
     })
    const  dictCodeAddUpdateRef = ref(null)
    let pageLoading = ref(true)
    let dictList = []
    //获取初始化数据
    const getDictDataList = () =>{
      pageLoading.value = true
        VueUtil().ajax(NuoDictController.queryDictPageByParam,state.queryForm).then(res=>{
          state.dictList = res.data.records
          state.queryForm.total = res.data.total
          pageLoading.value = false
        }).catch(()=>{
          pageLoading.value = false
        })
    }
    onMounted(async  () => {
     await getDictDataList()
    })

    //当前表格数量变更
    const handleSizeChange = (val) =>{
      page.handleSizeChange(val,state.queryForm,getDictDataList)
    }
    //当前页面变更
    const handleCurrentChange = (val) =>{
       page.handleCurrentChange(val,state.queryForm,getDictDataList)
    }
    //新增子项
    const addSon = ()=>{

    }
    //查看
    const view = (row) =>{
       pageLoading.value = true
       VueUtil().ajax(NuoDictController.queryDictById,{id: row.id}).then(res=>{
         dictCodeAddUpdateRef.value.init("字典编号新增",res.data,true)
         pageLoading.value = false
       }).catch(()=>{
         pageLoading.value = false
       })
    }
    //编辑
    const edit = (row) => {
      pageLoading.value = true
      VueUtil().ajax(NuoDictController.queryDictById,{id: row.id}).then(res=>{
        dictCodeAddUpdateRef.value.init("字典编号新增",res.data,false)
        pageLoading.value = false
      }).catch(()=>{
        pageLoading.value = false
      })
    }
    //删除
    const del = (row) =>{
       VueUtil().del("您将删除这个字典编号",NuoDictController.deleteDictById,{id: row.id},getDictDataList)
    }
    const add = () =>{
      dictCodeAddUpdateRef.value.init("字典编号新增")
    }
    return{
      handleSizeChange,
      handleCurrentChange,
      state,
      dictList,
      pageLoading,
      getDictDataList,
      view,
      edit,
      del,
      dictCodeAddUpdateRef,
      add,
      addSon
    }
  }
}
</script>

<style scoped>

</style>